@use './common/var' as *;

:root {
  @each $name in map-keys($gap-map) {
    #{makeAppVar(gap, $name)}: #{map-get($gap-map, $name)};
  }
}

@each $name in map-keys($gap-map) {
  $value: getAppVar(gap, $name);

  .mt-#{$name} {
    margin-top: $value;
  }

  .mr-#{$name} {
    margin-right: $value;
  }

  .mb-#{$name} {
    margin-bottom: $value;
  }

  .ml-#{$name} {
    margin-left: $value;
  }

  .margin-#{$name} {
    margin: $value;
  }

  .margin-h-#{$name} {
    margin-left: $value;
    margin-right: $value;
  }

  .margin-v-#{$name} {
    margin-top: $value;
    margin-bottom: $value;
  }

  .pt-#{$name} {
    padding-top: $value;
  }

  .pr-#{$name} {
    padding-right: $value;
  }

  .pb-#{$name} {
    padding-bottom: $value;
  }

  .pl-#{$name} {
    padding-left: $value;
  }

  .padding-#{$name} {
    padding: $value;
  }

  .padding-h-#{$name} {
    padding-left: $value;
    padding-right: $value;
  }

  .padding-v-#{$name} {
    padding-top: $value;
    padding-bottom: $value;
  }
}

@each $name in map-keys($color-map) {
  $value: map-get($color-map, $name);

  .c-#{$name} {
    color: $value !important;
  }
}

@each $name in map-keys($text-color-map) {
  $value: map-get($text-color-map, $name);

  .text-c-#{$name} {
    color: $value !important;
  }
}

.align-l {
  text-align: left;
}

.align-c {
  text-align: center;
}

.align-r {
  text-align: right;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix {
  @extend %clearfix;
}

.ellipse {
  @extend %ellipse;
}

.flex,
.flex-column {
  display: flex;

  &.flex-c {
    justify-content: center;
    align-items: center;
  }

  & > .flex-main,
  & > .flex-body {
    flex: 1;
  }

  & > .flex-body {
    overflow: auto;
  }
}

.flex {
  &.flex-end {
    justify-content: end;
  }

  &.flex-start {
    justify-content: start;
  }
}

.flex-column {
  flex-direction: column;

  &.flex-end {
    align-items: end;
  }

  &.flex-start {
    align-items: start;
  }
}
